dateMenu: Freeze popup size while browsing

As the popup's height depends on its content, which itself varies
depending on the selected day, browsing the calendar can result
in distracting size changes. To avoid this, the design calls for
the height to be frozen to the previous one in that case.
As the popup will always open with the current day selected, we
don't have to be very sophisticated and can just lock the popup
to the height corresponding to that day.

https://bugzilla.gnome.org/show_bug.cgi?id=744817

diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index 60d29ceb4b624b5dd9b9cfa434d3bf0384753207..4e88411a53265afdf9210dd9148d757135734e84 100644 (file)
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -21,6 +21,13 @@ const PanelMenu = imports.ui.panelMenu;
 const PopupMenu = imports.ui.popupMenu;
 const Calendar = imports.ui.calendar;
 
+function _isToday(date) {
+    let now = new Date();
+    return now.getYear() == date.getYear() &&
+           now.getMonth() == date.getMonth() &&
+           now.getDate() == date.getDate();
+}
+
 const TodayButton = new Lang.Class({
     Name: 'TodayButton',
 
@@ -52,7 +59,7 @@ const TodayButton = new Lang.Class({
             function(calendar, date) {
                 // Make the button reactive only if the selected date is not the
                 // current date.
-                this.actor.can_focus = this.actor.reactive = !this._isToday(date)
+                this.actor.can_focus = this.actor.reactive = !_isToday(date)
             }));
     },
 
@@ -71,13 +78,6 @@ const TodayButton = new Lang.Class({
          */
         let dateFormat = Shell.util_translate_time_string (N_("%A %B %e %Y"));
         this.actor.accessible_name = date.toLocaleFormat(dateFormat);
-    },
-
-    _isToday: function(date) {
-        let now = new Date();
-        return now.getYear() == date.getYear() &&
-               now.getMonth() == date.getMonth() &&
-               now.getDate() == date.getDate();
     }
 });
 
@@ -220,6 +220,40 @@ const WorldClocksSection = new Lang.Class({
     }
 });
 
+const FreezableBinLayout = new Lang.Class({
+    Name: 'FreezableBinLayout',
+    Extends: Clutter.BinLayout,
+
+    _init: function() {
+        this.parent();
+
+        this._frozen = false;
+        this._savedWidth = [NaN, NaN];
+        this._savedHeight = [NaN, NaN];
+    },
+
+    set frozen(v) {
+        if (this._frozen == v)
+            return;
+
+        this._frozen = v;
+        if (!this._frozen)
+            this.layout_changed();
+    },
+
+    vfunc_get_preferred_width: function(container, forHeight) {
+        if (!this._frozen || this._savedWidth.some(isNaN))
+            this._savedWidth = this.parent(container, forHeight);
+        return this._savedWidth;
+    },
+
+    vfunc_get_preferred_height: function(container, forWidth) {
+        if (!this._frozen || this._savedHeight.some(isNaN))
+            this._savedHeight = this.parent(container, forWidth);
+        return this._savedHeight;
+    }
+});
+
 const DateMenuButton = new Lang.Class({
     Name: 'DateMenuButton',
     Extends: PanelMenu.Button,
@@ -239,12 +273,17 @@ const DateMenuButton = new Lang.Class({
         this.actor.add_actor(this._clockDisplay);
         this.actor.add_style_class_name ('clock-display');
 
+        let layout = new FreezableBinLayout();
+        let bin = new St.Widget({ layout_manager: layout });
+        this.menu.box.add_child(bin);
+
         hbox = new St.BoxLayout({ name: 'calendarArea' });
-        this.menu.box.add_child(hbox);
+        bin.add_actor(hbox);
 
         this._calendar = new Calendar.Calendar();
         this._calendar.connect('selected-date-changed',
                                Lang.bind(this, function(calendar, date) {
+                                   layout.frozen = !_isToday(date);
                                    this._messageList.setDate(date);
                                }));